/* =============================================================================

  Globals

 ============================================================================ */

  *
    {
      margin:                 0;
      padding:                0;
      outline:                none;
      border:                 none;
    }
  html *
    {
      position:               relative;
      /**
       * z-index is set as a global to 1
       * - so that in case we ever need something
       * - to be behind everything else
       * - we can set it to z-index:0;
      **/
      z-index:                1;
    }
  html
    {
      font-size:              62.5%;
      background:             #fff;
    }
  body
    {
      min-width:              75.5rem;
      overflow-x:             hidden;
      font-family:            'Segoe UI', Tahoma, sans-serif;
      font-weight:            normal;
      font-size:              inherit;
      background:             #fff;
      color:                  #333;
    }
  h1
, h2
, h3
    {
      -webkit-user-select:    none;
      font-weight:            normal;
      /* Makes the vertical size of the text the same for all fonts. */
      line-height:            1;
    }
  a
, a:hover
, a:active
, a:focus
    {
      color:                  #15c;
      text-decoration:        none;
      outline:                none;
    }
  a:hover
, a:active
, a:focus
    {
      text-decoration:        underline;
    }
  .none
    {
      display:                none;
    }
  .clearfix:after
    {
      content:                '';
      display:                table;
      clear:                  both;
    }
  ul
    {
      list-style:             none;
    }

/* =============================================================================

  Header

 ============================================================================ */

  #header
    {
      position:               fixed;
      float:                  left;
      z-index:                2;
      padding:                2rem 0 0;
      width:                  16.5rem;
    }
  #header h1
    {
      font-size:              1.8em;
      padding:                0 0 1.8rem 2.4rem;
      color:                  #5C6166;
    }
  #header li
    {
      border-left:            .6rem solid transparent;
      padding-left:           .5rem;
      list-style-type:        none;
    }
  #submenu
    {
      display:                flex;
      flex-wrap:              wrap;
    }
  #header #submenu li
    {
      padding-left:           .8rem;
      width:                  100%;
    }
  #header li.selected
    {
      border-color:           rgb(78, 87, 100);
    }
  .menuItem
    {
      display:                inline-block;
      font-size:              1.2em;
      line-height:            1.417em;
      margin:                 .6rem 0;
      color:                  #999;
    }
  .selected.menuItem a
    {
      color:                  #464E5A;
    }

/* =============================================================================

  Content

 ============================================================================ */

  #content
    {
      padding:                0 0 0 16.5rem;
      max-width:              73.8rem;
      min-width:              60rem;
    }
  .page
    {
      display:                none;
      padding:                5.3rem 0 0;
    }
  .page:first-child
    {
      display:                block;
    }
  .pageHeading
    {
      position:               fixed;
      z-index:                2;
      top:                    0;
      font-size:              1.8em;
      padding:                2.1rem 0 1.3rem;
      max-width:              73.8rem;
      min-width:              58rem;
      background:             #fff;
      color:                  #303942;
    }
  .pageHeading:before
    {
      content:                ' ';
      display:                block;
      position:               absolute;
      right:                  0;
      bottom:                 -.1rem;
      left:                   0;
      height:                 .1rem;
      background-color:       #eee;
    }
  .sectionHeading
    {
      font-size:              1.4em;
      line-height:            1em;
      padding:                1.6rem 0 1rem;
      color:                  #000;
    }
  .sectionText
    {
      font-size:              1.2em;
      line-height:            1.75em;
      padding:                0 0 .7rem 1.8rem;
      width:                  56.16rem;
      color:                  #000;
    }
  .sectionText.noHeading
    {
      padding-left:           0;
      width:                  58.02rem;
    }
  .sectionText.first
    {
      margin-top:             1.2rem;
    }
  .pwFieldset
    {
      min-width:              0;
    }
  .pwList
    {
      margin:                 0 0 0 1.8rem;
      list-style:             none;
    }
  .pwListItem
    {
      line-height:            3em;
    }
  .pwLabel
    {
      font-size:              1.2em;
      color:                  #303942;
      cursor:                 pointer;
    }
  input[type='checkbox']
, input[type='radio']
    {
      -webkit-appearance:     none;
      -webkit-user-select:    none;
      position:               relative;
      bottom:                 2px;
      vertical-align:         middle;
      margin:                 0 5px 0 0;
      width:                  13px;
      height:                 13px;
      background-image:       -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
      border:                 1px solid rgba(0, 0, 0, 0.25);
      border-radius:          2px;
      box-shadow:             0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
      color:                  #444;
      font:                   inherit;
      text-shadow:            0 1px 0 rgb(240, 240, 240);
    }
  input[type='checkbox']:checked:before
    {
      -webkit-user-select:    none;
      content:                '';
      display:                block;
      height:                 100%;
      width:                  100%;
      background-image:       url('/global/img/tick-icon-11.png');
      background-size:        100% 100%;
    }
  input[type='radio']
    {
      border-radius:          100%;
    }
  input[type='radio']:checked:before
    {
      content:                '';
      display:                block;
      position:               absolute;
      top:                    3px;
      right:                  3px;
      bottom:                 3px;
      left:                   3px;
      background-color:       #666;
      border-radius:          100%;
    }
  .pwCta
    {
      font-family:            inherit;
      font-size:              1.2em;
      background-image:       -webkit-linear-gradient(
                                  #ededed
                                , #ededed 38%
                                , #dedede
                              );
      border:                 .1rem solid rgba( 0, 0, 0, .25 );
      border-radius:          .2rem;
      box-shadow:             0 .1rem 0 rgba( 0, 0, 0, .08 ),
                              inset 0 .1rem .2rem rgba( 255, 255, 255, .75 );
      color:                  #444;
      cursor:                 pointer;
      outline:                none;
      text-shadow:            0 .1rem 0 rgb( 240, 240, 240 );
      text-align:             center;
      text-decoration:        none;
    }
  .pwCta.hasText
    {
      line-height:            2em;
      padding:                0 1rem;
      min-width:              4.8rem;
    }
  .pwCta:hover:not(:disabled)
    {
      background-image:       -webkit-linear-gradient(
                                  #f0f0f0
                                , #f0f0f0 38%
                                , #e0e0e0
                              );
      border-color:           rgba( 0, 0, 0, .3 );
      box-shadow:             0 .1rem 0 rgba( 0, 0, 0, .12 ),
                              inset 0 .1rem .2rem rgba( 255, 255, 255, .95 );
      color:                  #000;
      text-decoration:        none;
    }
  .pwCta:active,
  .pwCta:focus
    {
      background-image: -webkit-linear-gradient( #e7e7e7, #e7e7e7 38%, #d7d7d7 );
      border-color: rgba( 0, 0, 0, .75 );
      box-shadow: none;
      text-shadow: none;
    }
  .pwCta:disabled
    {
      background:             #ededed;
      color:                  #999;
    }

/* =============================================================================

  Animations

 ============================================================================ */

  .fadeInFadeOut
    {
      display:                none;
    }
  .show.fadeInFadeOut
, .show.fadeOutFadeIn
    {
      display:                inline;
      opacity:                0;
      -webkit-animation:      fadeInFadeOut 2s ease 0s forwards;
              animation:      fadeInFadeOut 2s ease 0s forwards;
    }
  .reset.fadeInFadeOut
, .reset.fadeOutFadeIn
    {
      opacity:                1;
    }
  .show.fadeOutFadeIn
    {
      -webkit-animation-name: fadeOutFadeIn;
              animation-name: fadeOutFadeIn;
    }
@-webkit-keyframes fadeInFadeOut
    {
      0%   { opacity: 0; }
      50%  { opacity: 1; }
      100% { opacity: 0; }
    }
@keyframes fadeInFadeOut
    {
      0%   { opacity: 0; }
      50%  { opacity: 1; }
      100% { opacity: 0; }
    }
@-webkit-keyframes fadeOutFadeIn
    {
      0%   { opacity: 0; }
      75%  { opacity: 0; }
      100% { opacity: 1; }
    }
@keyframes fadeOutFadeIn
    {
      0%   { opacity: 0; }
      75%  { opacity: 0; }
      100% { opacity: 1; }
    }
